<template>
  <div v-cloak>
    <template v-if="active===0">
      <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :default-sort = "{prop: 'credit', order: 'descending'}"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="学分"
            sortable
            prop="credit">
        </el-table-column>
        <el-table-column label="学生信息">
          <el-table-column
              label="姓名"
              prop="name">
          </el-table-column>
          <el-table-column
              label="性别"
              prop="gender">
          </el-table-column>
          <el-table-column
              label="学号"
              prop="account">
          </el-table-column>
<!--          <el-table-column label="状态" prop="state">-->
<!--            <template #default="scope">-->
<!--            <span v-if="scope.row.state===0">-->
<!--              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>-->
<!--            </span>-->
<!--              <span v-if="scope.row.state===1">-->
<!--              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>-->
<!--            </span>-->
<!--              <span v-if="scope.row.state===2">-->
<!--              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>-->
<!--            </span>-->
<!--              <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 0 ? '#ccec5b':'#ED3F14' }">{{ scope.row.state === 1 ? '已通过' :scope.row.state === 0 ? '待审批':'未通过' }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table-column>

        <el-table-column
            align="center">
          <template #header>
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template #default="scope">
            <el-button
                size="mini"
                @click="handleView(scope.$index, scope.row);active=1">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table></template>
    <template v-if="active===1">
      <el-tag
          closable
          type="success"
          @close="active=0">
        学生信息
      </el-tag>
      <el-table
          :data="tableDataAgree.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :default-sort = "{prop: 'credit', order: 'descending'}"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column label="学分详情">
          <el-table-column
              label="总学分"
              sortable
              prop="after_changeCre">
          </el-table-column>
          <el-table-column label="学分变化" prop="creditNumber">
          </el-table-column>
          <el-table-column label="申请理由" prop="reason">
          </el-table-column>
          <el-table-column label="申请凭证" prop="pic_path">
            <template #default="scope">
              <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
              <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
            </template>
          </el-table-column>
          <el-table-column label="申请时间" prop="apply_Time">
          </el-table-column>
          <el-table-column label="审批时间" prop="judge_Time">
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
              <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 0 ? '#ccec5b':'#ED3F14' }">{{ scope.row.state === 1 ? '已通过' :scope.row.state === 0 ? '待审批':'未通过' }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
            align="right">
          <template #header>
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>

</template>
<script lang="ts">
import {getCurrentInstance} from "vue";
import {getLocalStudentCreditRecord} from "@/network/manager/getLocalStudentCreditRecord";
import {getLocalStudentAgreeAllApply} from "@/network/manager/getLocalStudentAgreeAllApply";
import {ElMessage} from "element-plus";

export default {
  name:'LocalStudentCreditRecord',
  data(){
    return{
      tableData: [{
        credit:1000,
        name:'测试',
        gender:'男',
        account:'202000509',
      }],
      tableDataAgree:[],
      search: '',
      active:0,
      url: 'http://localhost:7070'
    }
  },
  setup(){
    const {proxy}:any=getCurrentInstance();
    const Manager_id=localStorage.getItem('ManagerId')
    console.log(Manager_id)
    getLocalStudentCreditRecord(Manager_id).then(result=>{
      console.log(result.data.result)
      proxy.tableData=result.data.result
    }).catch(err=>{

    })

    function handleView(index, row) {
      console.log(index, row)
      console.log(row.id)//获取id
      const LocalStudentAgreeAllApply_id=row.id
      getLocalStudentAgreeAllApply(LocalStudentAgreeAllApply_id).then(result=>{
        console.log(result.data.result)
        proxy.tableDataAgree=result.data.result

        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status == 1) {
          ElMessage.error(msg);
        } else {
          //proxy.tableData.splice(index, 1)
          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });

        }

      }).catch(err=>{
        console.log("查看学分详情失败")
        const msg = "查看学分详情失败！请稍后尝试！";
        ElMessage.error(msg);
      })
    }



    return{
      handleView
    }
  }
}
</script>
<style>
[v-cloak]{display:none!important}
</style>
